<template>
	<div class="player" >
		<div class="normal-player" v-show="fullScreen">
			<div class="background">
	          	<img width="100%" height="100%" :src="currentSong.image">
	        </div>
	        <div class="top">
<<<<<<< HEAD
	          	<div class="back" @click='back'>
=======
	          	<div class="back" @click="back">
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
	            	<i class="icon-back"></i>
	          	</div>
	          	<h1 class="title no-wrap" v-html="currentSong.name"></h1>
	          	<h2 class="subtitle" v-html="currentSong.singer"></h2>
	        </div>
	        <div class="middle">
	          	<div class="middle-l" ref="middleL">
	            	<div class="cd-wrapper" ref="cdWrapper">
	              		<div :class="cdClass">
	                		<img class="image" :src="currentSong.image">
	              		</div>
	            	</div>
<<<<<<< HEAD
	            	<div class="playing-lyric-wrapper">
	            		<div class="playing-lyric">
	            			1111111111
	            		</div>
	            	</div>
	          	</div>
	        </div>
	        <div class="bottom"> 
	        	<progress-bar :Time='currentTime' @changeTimeClick="changeTimeClick"></progress-bar>
	        	
=======
	          	</div>
	        </div>
	        <div class="bottom">
	        	<div>
	        		<span>{{format(currentTime)}}</span>
	        		<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
	        		<span>{{format(currentSong.duration)}}</span>
	        	</div>
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
	        	<div class="operators">
	        		<div class="icon i-left">
	        			<i class="icon-sequence"></i>
	        		</div>
	        		<div class="icon i-left">
<<<<<<< HEAD
	        			<i class="icon-prev" @click='prev'></i>
	        		</div>
	        		<div class="icon i-center">
	        			<i :class="setIcon" @click='togglePlay'></i>
	        		</div>
	        		<div class="icon i-right">
	        			<i class="icon-next" @click='next'></i>
=======
	        			<i class="icon-prev" @click="prev" :class="disable"></i>
	        		</div>
	        		<div class="icon i-center">
	        			<i :class="palyIcon" @click="togglePlay"></i>
	        		</div>
	        		<div class="icon i-right">
	        			<i class="icon-next" @click="next" :class="disable"></i>
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
	        		</div>
	        		<div class="icon i-right">
	        			<i class="icon-not-favorite"></i>
	        		</div>
	        	</div>
	        </div>
		</div>
<<<<<<< HEAD
		<div class="mini-player" v-show="!fullScreen&&currentSong.url" @click="open">
=======
		<div class="mini-player" v-show="!fullScreen && currentSong.url" @click="open">
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
			<div class="icon">
	          	<img width="40" height="40" :src="currentSong.image">
	        </div>
	        <div class="text">
	          	<h2 class="name no-wrap" v-html="currentSong.name"></h2>
	          	<p class="desc no-wrap" v-html="currentSong.singer"></p>
	        </div>
<<<<<<< HEAD
	        <div class="control" @click.stop='togglePlay'>
	        	<i class="icon-mini" :class="setIcon"></i>
=======
	        <div class="control">
	        	<i @click.stop="togglePlay" class="icon-mini" :class="minCdCls"></i>
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
	        </div>
	        <div class="control">
	          	<i class="icon-playlist"></i>
	        </div>
		</div>
<<<<<<< HEAD
		<audio ref="audio" @timeupdate='updateTime' @error='audioError' @ended="end" @canplay='playReady' :src="currentSong.url" ></audio>
=======
		<audio ref="audio" @timeupdate="updateTime" @error="aduioError"  @canplay="audioReady" :src="currentSong.url"></audio>
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
	</div>
</template>

<script>
<<<<<<< HEAD

	
	import progressBar from 'base/progressBar/progressBar'

	import { mapGetters,mapMutations } from 'vuex'
	import {getLyric} from 'api/lyric'
=======
	import { mapGetters,mapMutations } from 'vuex'
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a

	export default {
		data(){
			return {
<<<<<<< HEAD
				readyState:false,
				currentTime:0
			}
		},
		computed: {
			...mapGetters([
				'fullScreen',
				'playList',
				'currentSong',
				'playing',
				'currentIndex'
			]),
			setIcon(){
=======
				songReady:false,
				currentTime:0
			}
		},
		computed:{
			...mapGetters([
				'playList',
				'fullScreen',
				'currentSong',
				'currentIndex',
				'playing'
			]),
			palyIcon(){
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
				return this.playing ? 'icon-pause' : 'icon-play'
			},
			cdClass(){
				return this.playing ? 'cd play' : 'cd play pause'
<<<<<<< HEAD
			}
		},
		mounted(){
			getLyric(212755342).then((res)=>{
				// console.log(res)
				// console.log(123)
			})
		},
		methods:{
			...mapMutations({
				set_fullScreen:'SET_FULLSCREEN',
				set_playing_state:'SET_PLAYING_STATE',
				set_currentIndex:'SET_CURRENTINDEX'
			}),
			//点击小窗口播放
			back(){
				this.set_fullScreen(false)
			},
			//点击小窗口变成全屏播放
			open(){
				this.set_fullScreen(true)
			},
			//点击播放上一首，但当音频未准备就绪时不能点击
			prev(){ 
				if (!this.readyState) {
					return
				}

				if(this.currentIndex == 0) {
					this.set_currentIndex(this.playList.length);
				}
				this.set_currentIndex(this.currentIndex-1);
				this.readyState = false
			},
			//点击播放下一首，但当音频未准备就绪时不能点击
			next(){
				if (!this.readyState) {
					return;
				}

				this.set_currentIndex(this.currentIndex+1);
				if (this.currentIndex == this.playList.length) {
					this.set_currentIndex(0);
				}
				this.readyState = false
			},
			playReady(){
				this.readyState = true
			},
			audioError(){
				this.readyState = true;
				this.set_playing_state(false);
			},
			end(){
				this.next()
			},
			//根据当前是否在播放音乐，设置点击事件控制播放与暂停
			togglePlay(){
				this.set_playing_state(!this.playing);
				if (!this.playing) {
					this.$refs.audio.pause()
				}else{
					this.$refs.audio.play()
				}
			},
			updateTime(e){
				this.currentTime = e.target.currentTime
			},
			changeTimeClick(changeTime){
				this.$refs.audio.currentTime = changeTime;
			}
		},
		watch:{
			currentSong(){
				this.$nextTick(()=>{
					this.$refs.audio.play()
					this.set_playing_state(true)
				})
			}
		},
		components:{
			progressBar
=======
			},
			minCdCls(){
				return this.playing ? 'icon-pause-mini' : 'icon-play-mini'
			},
			disable(){
				return this.songReady ? '' : 'disable'
			}
		},
		methods:{
			back(){
				this.setFullScreen(false)
			},
			open(){
				this.setFullScreen(true)
			},
			updateTime(e){
				this.currentTime = e.target.currentTime
			},
			format(times){
				times = Math.floor(times)
				let minute = Math.floor(times / 60)
				let second = Math.floor(times % 60)
				if(second < 10){
					second = '0' + second
				}
				return `${minute}:${second}`
			},
			audioReady(){
				this.songReady = true
			},
			aduioError(){
				this.songReady = true
			},
			next(){
				if(!this.songReady){
					return 
				}
				let index = this.currentIndex + 1
				if(index == this.playList.length){
					index = 0
				}
				this.setCurrentIndex(index)
				this.songReady = false
			},
			prev(){
				if(!this.songReady){
					return 
				}
				let index = this.currentIndex - 1
				if(index == -1){
					index = this.playList.length - 1
				}
				this.setCurrentIndex(index)
				this.songReady = false
			},
			togglePlay(){
				this.setPlayingState(!this.playing)
			},
			...mapMutations({
				setFullScreen:'SET_FULL_SCREEN',
				setPlayingState:'SET_PLAYING_STATE',
				setCurrentIndex:'SET_CURRENT_INDEX'
			})
		},
		watch:{
			currentSong(newSong){
				this.$nextTick(()=>{
					this.$refs.audio.play()
				})
			},
			playing(newPlaying){
				const audio = this.$refs.audio;
				this.$nextTick(()=>{
					newPlaying ? audio.play() : audio.pause()
				})
				
			}
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
		}
	}
</script>

<<<<<<< HEAD
<style scoped lang="less">
	@import "~assets/less/variable";
 	@import "~assets/less/mixin";
 	.player {
=======
<style scoped lang='less'>
	@import "~assets/less/variable";
	@import "~assets/less/mixin";

	.player {
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
		.normal-player {
			position: fixed;
			left: 0;
			right:0;
			top:0;
			bottom: 0;
			z-index: 150;
      		background: @color-background;
      		.background {
		        position: absolute;
		        left: 0;
		        top: 0;
		        width: 100%;
		        height: 100%;
		        z-index: -1;
		        opacity: 0.6;
		        filter: blur(20px);
      		}
      		.top {
      			position: relative;
        		margin-bottom: 25px;
        		.back {
		          	position: absolute;
		          	top: 0;
		          	left: 6px;
		          	z-index: 50;
		          	.icon-back {
		            	display: block;
		            	padding: 9px;
		            	font-size: @font-size-large-x;
		            	color: @color-theme;
		            	transform: rotate(-90deg);
		          	}
        		}
<<<<<<< HEAD
        		.title { 
=======
        		.title {
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
		          	width: 70%;
		          	margin: 0 auto;
		         	line-height: 40px;
		          	text-align: center;
		          	font-size: @font-size-large;
		          	color: @color-text;
        		}
        		.subtitle{
			        line-height: 20px;
			        text-align: center;
			        font-size: @font-size-medium;
			        color: @color-text;
        		}
      		}
      		.middle {
      			position: fixed;
        		width: 100%;
        		top: 80px;
        		bottom: 170px;
        		white-space: nowrap;
        		font-size: 0;
        		.middle-l {
        			display: inline-block;
          			vertical-align: top;
          			position: relative;
          			width: 100%;
          			height: 0;
          			padding-top: 80%;
          			.cd-wrapper {
          				position: absolute;
            			left: 10%;
            			top: 0;
            			width: 80%;
            			height: 100%;
            			.cd {
            				width: 100%;
              				height: 100%;
              				box-sizing: border-box;
              				border: 10px solid rgba(255, 255, 255, 0.1);
              				border-radius: 50%;
              				.image {
				                position: absolute;
				                left: 0;
				                top: 0;
				                width: 100%;
				                height: 100%;
				                border-radius: 50%;
              				}
            			}
          			}
<<<<<<< HEAD
					.playing-lyric-wrapper{
			            width: 80%;
			            margin: 30px auto 0 auto;
			            overflow: hidden;
			            text-align: center;
			            .playing-lyric{
							height: 20px;
							line-height: 20px;
							font-size: @font-size-medium;
							color: @color-text-l;
						}
					}
=======
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
        		}
      		}
      		.bottom {
      			position: absolute;
        		bottom: 50px;
        		width: 100%;
<<<<<<< HEAD
       //  		.duration{
       //  			display: flex;
       //  			justify-content:space-between;
       //  			align-items:center;
       //  			font-size: @font-size-small-s;
       //  			padding:5px 15px;
       //  			.progress{
       //  				display: inline-block;
       //  				width: 75%;
       //  				height: 1.2px;
       //  				background-color:@color-text-ll;
       //  				position: relative;
       //  				.progress_active{
							// position: absolute;
							// display: inline-block;
							// left: 0;
							// top:0;
							// height: 1.2px;
							// background-color: @color-theme;
       //  				}
       //  				.point{
       //  					display: inline-block;
       //  					position: absolute;
       //  					top:-7px;
       //  					width: 15px;
       //  					height: 15px;
       //  					border-radius: 50%;
       //  					background-color: @color-theme;
       //  				}
       //  			}
       //  			.total_time{
       //  				float:right;
       //  			}
       //  		}
=======
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
        		.operators {
        			display: flex;
          			align-items: center;
          			.icon {
          				flex: 1;
            			color: @color-theme;
            			.disable {
            				color:@color-theme-d
            			}
            			i {
            				font-size: 30px;
            			}
          			}
          			.i-left {
            			text-align: right;
          			}
          			.i-center {
			            padding: 0 20px;
			            text-align: center;
			            i {
			              font-size: 40px;
			            }
          				
          			}
			        .i-right{
			            text-align: left;
			        }
			        .icon-favorite{
			            color: @color-sub-theme;
			        }
        		}
      		}
		}
		.mini-player{
	      	display: flex;
	      	align-items: center;
	      	position: fixed;
	      	left: 0;
	      	bottom: 0;
	      	z-index: 180;
	      	width: 100%;
	      	height: 60px;
	      	background: @color-highlight-background;
	      	.icon{
		        flex: 0 0 40px;
		        width: 40px;
		        padding: 0 10px 0 20px;
		        img{
		        	border-radius: 50%
		        }
	      	}
	      	.text {
	      		display: flex;
        		flex-direction: column;
       	 		justify-content: center;
        		flex: 1;
        		line-height: 20px;
        		overflow: hidden;
        		.name{
        			margin-bottom: 2px;
          			font-size: @font-size-medium;
          			color: @color-text;
        			.desc {
        				font-size: @font-size-small;
			          	color: @color-text-d;
        			} 
        		}	
	      	}
	      	.control{
	      		flex: 0 0 30px;
		        width: 30px;
		        padding: 0 10px;
		        .icon-play-mini, .icon-pause-mini, .icon-playlist {
		        	font-size: 30px;
		          	color: @color-theme-d;
		        }
		        .icon-mini{
		          	font-size: 32px;
<<<<<<< HEAD
		          	color: @color-theme-d;
=======
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
		        }
	      	}  
		}
	}
<<<<<<< HEAD

	.play{
		animation:rotatea 20s linear infinite;
		// animation-play-state: running;
	}
	.pause {
		animation-play-state: paused;
	}

	@keyframes rotatea {
		0% {
			transform:none
=======
	.play {
		animation:rotate 20s linear infinite;
	}
	.pause {
		animation-play-state:paused
	}
	@keyframes rotate {
		0% {
			transform:rotate(0)
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
		}
		100% {
			transform:rotate(360deg)
		}
	}
</style>